import React, { Component } from 'react'
import { Toast, NavBar, Card, Tabs, Cell, Image, Checkbox, Button } from 'react-vant';
// 首页：计算次数，列表：tap切换筛选数据，完成未完成状态的切换，删除放回收站
import CTX from './ctx';
export default class Home extends Component {
    static contextType = CTX
    state = {
        tapIndex: 0
    }
    
     //计算总个数
     get AllT() {
        let { consultList } = this.context
        return consultList.reduce((sum, v) => !v.del ? sum + 1 : sum, 0)
    }

    //计算完成个数
    get select() {
        let { consultList } = this.context
        return consultList.reduce((sum, v) => !v.del && v.selected ? sum + 1 : sum, 0)
    }
    
    render() {
        let { consultList, changeSelected, huidel } = this.context
        let { tapIndex } = this.state
        // tab切换过滤数组
        let newlist = consultList.filter(item => {
            if (tapIndex == 0) {// 全部 删除=false
                return !item.del
            }
            if (tapIndex == 1) {// 已完成 selected为true && del=false
                return item.selected && !item.del
            }
            if (tapIndex == 2) {// 未完成 selected为false && del=false
                return !item.selected && !item.del
            }
            if (tapIndex == 3) {// 回收站 del=true
                return item.del
            }
        })
        
        return (
            <div style={{ padding: "15px", paddingTop: "0", boxSizing: "border-box" }}>
                <NavBar
                    title="充值记录"
                    leftText=""
                />
                <Card round style={{ backgroundColor: "blue", color: "#fff" }}>
                    <Card.Header>众合法律咨询</Card.Header>
                    <Card.Body>总次数：{this.AllT}</Card.Body>
                    <Card.Body>完成次数：{this.select}</Card.Body>
                </Card>
                {
                    <Tabs border type='capsule' onChange={(index) => {
                        this.setState({ tapIndex: index })
                    }}>
                        {
                            ['全部', '已完成', '未完成', '回收站'].map(item => (
                                <Tabs.TabPane key={item} title={`${item}`} />
                            ))
                        }
                    </Tabs>
                }

                {
                    newlist.map(v => {
                        return <Cell
                            center
                            key={v.id}
                            icon={<Checkbox checked={v.selected} onChange={() => {
                                changeSelected(v.id)
                            }} />}
                            title={v.title}
                            label={v.consultnr}
                            value={<>
                                <div style={{ display: "flex", justifyContent: "space-between" }}>
                                    <p>时间：{v.ctime}</p>
                                    {/* 删除放到回收站 */}
                                    <p onClick={() => {
                                        huidel(v.id)
                                    }}>X</p>
                                </div>
                                <p>{v.time}</p>
                            </>
                            }
                        />
                    })
                }


                <div style={{ textAlign: "center", marginTop: "20px" }}>
                    <Button type="primary" onClick={()=>{
                        this.props.history.push("/add")
                    }}>去咨询</Button>
                </div>


            </div>
        )
    }
}
